<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed"  width="240"
                    :style="{padding:'10px', height: '100vh', position: 'fixed', left: 0, top: '0', bottom: 0 ,'borderRight':'1px solid rgba(5, 5, 5, 0.08)'}" >
      <!-- <div class="logo">
        <img src="/imgs/logo.png" alt="">
      </div> -->
      <cc-menu></cc-menu>
    </a-layout-sider>
    <a-layout :style="{ marginLeft: collapsed?'80px':'240px' }">
      <cc-header @expand="handleExpand"/>
      <a-layout-content>
        <div :style="{ 'height':'calc(100vh - 45px)' }">
          <nuxt-page></nuxt-page>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
const dashboardState = useStore.dashboardState()
const collapsed = ref(dashboardState.expand);
const handleExpand = ()=>{
  collapsed.value = !collapsed.value
  dashboardState.setData(collapsed.value)
}

useHead({
  title:"后台管理"
})

definePageMeta({
  middleware:["md-auth"]
})
</script>
<style>

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
  img {
    width: 160px;
    height: 40px;
  }
}


</style>
